<template>
  <div class="">
    <a-modal
      v-model:visible="dialogVisible"
      :title="dialogTitle"
      :modal-style="modalStyle"
      :body-style="bodyStyle"
      :mask-closable="false"
      @cancel="dialogCancel"
      @before-ok="dialogBeforeOk"
    >
      <a-form ref="formRef" :model="formModel">
        <a-form-item field="parent_id" label="分类">
          <a-cascader
            v-model="formModel.cate_id"
            :options="categoryDatas"
            :field-names="{ value: 'id', label: 'name' }"
            placeholder="分类"
            check-strictly
            allow-search
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="title"
          label="标题"
          required
          :validate-trigger="['change','input']"
          :rules="[
            {
              required: true,
              message: '标题不能为空',
            },
          ]"
        >
          <a-input v-model="formModel.title" placeholder="请输入标题"/>
        </a-form-item>
        <a-form-item field="info" label="详细">
<!--          <a-textarea v-model="formModel.info" allow-clear :max-length="{ length: 20, errorOnly: true }" show-word-limit/>-->
          <TinymceEditor :value="formModel.info" @getContent="getContent"/>
        </a-form-item>
        <a-form-item field="status" label="状态">
          <a-input-number v-model="formModel.status" :step="0.01" :precision="2" :min="1" :max="10" :style="{width:'100px'}"/>
        </a-form-item>
        <a-form-item field="sort" label="排序">
          <a-input-number v-model="formModel.sorting" mode="button" :style="{width:'160px'}"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';

  import { apiInfo, apiSave } from '@/api/article';
  import TinymceEditor from '@/components/tinymce/index.vue';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    id: {
      type: [Number, String],
      default: '',
    },
    categoryDatas: {
      type: Array,
      default() {
        return [];
      },
    },
  });
  const emit = defineEmits(['saveCallback']);

  const baseFormModel = {
    id: '',
    created_at: '',
    updated_at: '',
    cate_id: '',
    title: '',
    sorting: 100,
    status: 1,
  };
  const formRef = ref<FormInstance>();
  const formModel = ref<any>(baseFormModel);
  const modalStyle = {
    width: '60%',
    height: '80%',
  };
  const bodyStyle = {
    height: 'calc(100% - 108px)',
    overflow: 'auto',
  };

  const dialogVisible = ref(false);
  const dialogTitle = ref();

  const categoryDatas = ref<any>([]); // 分类

  // 表单重置
  const reset = async () => {
    formModel.value = baseFormModel;
    await formRef.value?.resetFields();
  };
  const fetchData = async (row?: any) => {
    categoryDatas.value = props.categoryDatas;

    dialogVisible.value = true;
    dialogTitle.value = '新增';
    if (row) {
      dialogTitle.value = `编辑: ${row.id}`;
    }
    reset();
    if (row) {
      const { data } = await apiInfo({ id: row.id });
      formModel.value = data;
      formModel.value.date_range = [formModel.value.startdate, formModel.value.enddate];
    }
  };
  // 提交
  const submit = async (done: any) => {
    try {
      const ruleRes = await formRef.value?.validate();
      if (!ruleRes) {
        [formModel.value.startdate, formModel.value.enddate] = formModel.value.date_range;
        await apiSave(formModel.value);
        done();
        emit('saveCallback');
      } else {
        done(false);
      }
    } catch (err) {
      done(false);
    } finally {
      done(false);
    }
  };
  const getContent = (value: string) => {
    formModel.value.info = value;
  };

  const dialogCancel = () => {
    dialogVisible.value = false;
  };
  const dialogBeforeOk = (done: any) => {
    submit(done);
  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
  });
</script>

<style scoped lang="less">

</style>
